<template>
  <div class="menuAuth">
    <header class="d-flex justify-content-between">
      <div class="left d-flex">
        <t-input v-model="menuName" icon="account" placeholder="实体名称/实体ID">
        </t-input>
        <t-button icon="skip-backward"></t-button>
      </div>
      <div class="right">
        <t-button type="primary" icon="format-align-left">新增实体</t-button>
        <t-button type="outline-secondary" icon="format-align-left"></t-button>
      </div>
    </header>
    <div class="search">
      <div class="d-flex condition">
        <div>
          <p>实体名称</p>
          <t-input placeholder="请输入"></t-input>
        </div>
        <div>
          <p>实体ID</p>
          <t-input placeholder="请输入"></t-input>
        </div>
        <div>
          <p>状态</p>
          <t-select placeholder="请选择">
            <t-option v-for="(item, index) in stateList" :key="index" :value="item.value">
              {{ item.label }}
            </t-option>
          </t-select>
        </div>
      </div>
    </div>
    <t-table :columns="columns" :data="data">
    </t-table>
    <div class="page d-flex justify-content-between">
      <span>共{{ pagination.total }}条</span>
      <t-pager :total="pagination.total" :current.sync="pagination.currentPage" :page-size.sync="pagination.size" :sizer-range="pagination.sizes"
               show-elevator show-sizer
               @on-size-change="onSizeChange"
               @on-change="onChange"></t-pager>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '实体ID'
        },
        {
          title: '实体名称'
        },
        {
          title: '实体编码'
        },
        {
          title: '创建时间'
        },
        {
          title: '备注'
        },
        {
          title: '状态'
        },
        {
          title: '操作'
        }
      ],
      data: [],
      stateList: [
        {
          value: 0,
          label: '禁用'
        },
        {
          value: 1,
          label: '启用'
        }
      ],
      pagination: {
        currentPage: 1,
        sizes: [10, 15, 20],
        size: 10,
        total: 0
      },
      menuName: ''
    }
  },
  methods: {
    onSizeChange(val) {
      this.pagination.size = val
    },
    onChange(val) {
      this.pagination.currentPage = val
    }
  }
}
</script>
<style lang="scss" scoped>
.menuAuth {
  padding: 10px;
  header {
    .left {
      .btn {
        margin-left: 10px;
      }
    }
  }
  .search {
    background: #eee;
    padding: 10px;
    margin: 5px 0;
    .condition {
      > div {
        margin: 0 10px;
        p {
          margin: 0 0 3px 0;
        }
        input,.select {
          width: 270px;
        }
     }
    }
  }
  .page {
    margin-top: 20px;
  }
}
</style>

